<template>
	<view class="otherInfoBox" :class="isOpen?'otherInfoBoxOpen':''">
		<view class="otherInfo" @click="isOpenChange">
			<view class="otherTitle" v-if="isOpen">其他信息</view>
			<image class="rightIcon" :class="isOpen?'rightIconOn':''" src="/static/rightWhite.png" mode=""></image>
		</view>
		<view class="listBox" v-if="isOpen" :class="isOpen?'listBoxOn':''" :style="isOpen?'height:'+(list.length*60+20)+'rpx;width:400rpx':''">
			<view class="list" v-if="isSave == 1||isShowAll||(item.name != '照片取证'&&item.name != '家庭年收入情况')" @click="link(item.path)" :class="index == 0?'listFirst':''" v-for="(item,index) in list" :key="index">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			userId:{
				type:String,
				default:''
			},
			isShowAll:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return {
				isOpen:false,
				list:[
					{name:'基本信息',path:'/pages/kancha/index'},
					{name:'共同生活成员情况',path:'/pages/kancha/familyMemberInfo'},
					{name:'非共同生活成员情况',path:'/pages/kancha/notFamilyMemberInfo'},
					{name:'共同生活成员收入情况1',path:'/pages/kancha/familyGetMoneyInfo'},
					{name:'共同生活成员收入情况2',path:'/pages/kancha/familyGetMoneyInfoOne'},
					{name:'共同生活成员收入情况3',path:'/pages/kancha/familyGetMoneyInfoTwo'},
					{name:'共同生活成员收入情况4',path:'/pages/kancha/familyGetMoneyInfoThree'},
					{name:'家庭财产情况1',path:'/pages/kancha/familyMoneyInfo'},
					{name:'家庭财产情况2',path:'/pages/kancha/familyMoneyInfoOne'},
					{name:'家庭财产情况3',path:'/pages/kancha/familyMoneyInfoTwo'},
					{name:'家庭支出情况',path:'/pages/kancha/familyPay'},
					{name:'照片取证',path:'/pages/kancha/photo'},
					{name:'家庭年收入情况',path:'/pages/kancha/familyInfo'}
				],
				isSave:0
			}
		},
		mounted() {
			this.isSave = uni.getStorageSync('isSave')
		},
		methods:{
			// 列表开关
			isOpenChange(){
				this.isOpen = !this.isOpen
				this.$emit('openChange',this.isOpen)
			},
			link(path){
				uni.redirectTo({
					url:path+(this.userId?'?id='+userId:'')
				})
			}
			
		}
	}
</script>

<style scoped>
	.otherInfoBox{
		position: fixed;
		right: 0;
		top:200rpx;
		font-family: '黑体';
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.otherInfoBoxOpen{
		top:50%;
		transform: translateY(-50%);
	}
	.otherInfo{
		max-width: 200rpx;
		min-width: 40rpx;
		height:70rpx;
		padding-left: 10rpx;
		text-align: center;
		font-size: 24rpx;
		color:white;
		border-radius: 35rpx 0 0 35rpx;
		background-color: #3b3b3b;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rightIcon{
		margin-left: 20rpx;
		position: relative;
		transition: all 0.3s;
		width: 30rpx;
		height: 30rpx;
	}
	.rightIconOn{
		transform: rotate(90deg);
	}
	.listBox{
		border-radius: 10rpx;
		height:0;
		position: relative;
		/* transition: all 0.3s; */
		overflow: hidden;
		width: 0;
		background-color: white;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 20rpx;
	}
	.listBoxOn{
		box-shadow: 0 0 16rpx 0 #000;
	}
	.list{
		line-height: 60rpx;
		border-bottom: 1rpx solid #efefef;
	}
</style>
